﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photino</title>

    <!--
    <script src="app://dynamic.js"></script>
    -->

    <script>
        //This code fires when .NET calls SendWebMessage
        window.external.receiveMessage(message => alert(message));

        function OpenChildWindow() {
            window.external.sendMessage('child-window');
        }

        function ZoomIn() {
            window.external.sendMessage('zoom-in');
        }

        function ZoomOut() {
            window.external.sendMessage('zoom-out');
        }

        function Center() {
            window.external.sendMessage('center');
        }

        function Close() {
            window.external.sendMessage('close');
        }

        function ClearBrowserAutoFill() {
            window.external.sendMessage('clearbrowserautofill');
        }

        function Minimize() {
            window.external.sendMessage('minimize');
        }

        function Maximize() {
            window.external.sendMessage('maximize');
        }

        function SetContextMenuEnabled() {
            window.external.sendMessage('setcontextmenuenabled');
        }
        
        function SetDevToolsEnabled() {
            window.external.sendMessage('setdevtoolsenabled');
        }

        function SetFullScreen() {
            window.external.sendMessage('setfullscreen');
        }

        function SetIconFile() {
            window.external.sendMessage('seticonfile');
        }

        function SetPosition() {
            window.external.sendMessage('setposition');
        }

        function SetResizable() {
            window.external.sendMessage('setresizable');
        }

        function SetSizeUp() {
            window.external.sendMessage('setsize-up');
        }

        function SetSizeDown() {
            window.external.sendMessage('setsize-down');
        }

        function SetTitle() {
            window.external.sendMessage('settitle');
        }

        function SetTopmost() {
            window.external.sendMessage('settopmost');
        }

        function SetTransparent() {
            window.external.sendMessage('settransparent');
        }

        function ShowState() {
            window.external.sendMessage('showproperties');
        }

        function SendWebMessage() {
            window.external.sendMessage('sendWebMessage');
        }

        function ToastNotification() {
            window.external.sendMessage('toastNotification');
        }

        function ShowOpenFile() {
            window.external.sendMessage('showOpenFile');
        }

        function ShowOpenFileAsync() {
            window.external.sendMessage('showOpenFileAsync');
        }

        function ShowOpenFolder() {
            window.external.sendMessage('showOpenFolder');
        }

        function ShowOpenFolderAsync() {
            window.external.sendMessage('showOpenFolderAsync');
        }

        function ShowSaveFile() {
            window.external.sendMessage('showSaveFile');
        }

        function ShowSaveFileAsync() {
            window.external.sendMessage('showSaveFileAsync');
        }

        function ShowMessage() {
            window.external.sendMessage('showMessage');
        }

        function SetMinSize() {
            window.external.sendMessage('setMinSize');
        }

        function SetMaxSize() {
            window.external.sendMessage('setMaxSize');
        }

        (() => {
  // The width and height of the captured photo. We will set the
  // width to the value defined here, but the height will be
  // calculated based on the aspect ratio of the input stream.

  const width = 320; // We will scale the photo width to this
  let height = 0; // This will be computed based on the input stream

  // |streaming| indicates whether or not we're currently streaming
  // video from the camera. Obviously, we start at false.

  let streaming = false;

  // The various HTML elements we need to configure or control. These
  // will be set by the startup() function.

  let video = null;
  let canvas = null;
  let photo = null;
  let startbutton = null;

  function showViewLiveResultButton() {
    if (window.self !== window.top) {
      // Ensure that if our document is in a frame, we get the user
      // to first open it in its own tab or window. Otherwise, it
      // won't be able to request permission for camera access.
      document.querySelector(".contentarea").remove();
      const button = document.createElement("button");
      button.textContent = "View live result of the example code above";
      document.body.append(button);
      button.addEventListener("click", () => window.open(location.href));
      return true;
    }
    return false;
  }

  function startup() {
    if (showViewLiveResultButton()) {
      return;
    }
    video = document.getElementById("video");
    canvas = document.getElementById("canvas");
    photo = document.getElementById("photo");
    startbutton = document.getElementById("startbutton");

    navigator.mediaDevices
      .getUserMedia({ video: true, audio: false })
      .then((stream) => {
        video.srcObject = stream;
        video.play();
      })
      .catch((err) => {
        console.error(`An error occurred: ${err}`);
      });

    video.addEventListener(
      "canplay",
      (ev) => {
        if (!streaming) {
          height = video.videoHeight / (video.videoWidth / width);

          // Firefox currently has a bug where the height can't be read from
          // the video, so we will make assumptions if this happens.

          if (isNaN(height)) {
            height = width / (4 / 3);
          }

          video.setAttribute("width", width);
          video.setAttribute("height", height);
          canvas.setAttribute("width", width);
          canvas.setAttribute("height", height);
          streaming = true;
        }
      },
      false,
    );

    startbutton.addEventListener(
      "click",
      (ev) => {
        takepicture();
        ev.preventDefault();
      },
      false,
    );

    clearphoto();
  }

  // Fill the photo with an indication that none has been
  // captured.

  function clearphoto() {
    const context = canvas.getContext("2d");
    context.fillStyle = "#AAA";
    context.fillRect(0, 0, canvas.width, canvas.height);

    const data = canvas.toDataURL("image/png");
    photo.setAttribute("src", data);
  }

  // Capture a photo by fetching the current contents of the video
  // and drawing it into a canvas, then converting that to a PNG
  // format data URL. By drawing it on an offscreen canvas and then
  // drawing that to the screen, we can change its size and/or apply
  // other changes before drawing it.

  function takepicture() {
    const context = canvas.getContext("2d");
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);

      const data = canvas.toDataURL("image/png");
      photo.setAttribute("src", data);
    } else {
      clearphoto();
    }
  }

  // Set up our event listener to run the startup process
  // once loading is complete.
  window.addEventListener("load", startup, false);
})();

    </script>
</head>
<body style="background-color: rgba(0,0,0,0)">
    <h1 id="Title">Test Bench</h1>
    <b>Window</b><br>
    <button onclick="SetIconFile()">Icon</button>
    <button onclick="SetTitle()">Title</button>
    <button onclick="Center()">Center</button>
    <button onclick="SetPosition()">Position</button>
    <button onclick="SetTopmost()">Topmost</button>
    <button onclick="SetTransparent()">Transparent</button>
    <button onclick="SetFullScreen()">Kiosk</button>
    <button onclick="Close()">Close</button>
    <br>
    <b>Size</b><br>
    <button onclick="Minimize()">Minimize</button>
    <button onclick="Maximize()">Maximize</button>
    <button onclick="SetResizable()">Resizable</button>
    <button onclick="SetSizeUp()">Size Up</button>
    <button onclick="SetSizeDown()">Size Down</button>
    <button onclick="SetMinSize()">Set Min Size</button>
    <button onclick="SetMaxSize()">Set Max Size</button>
    <br>
    <b>Browser</b><br>
    <button onclick="ZoomIn()">Zoom In</button>
    <button onclick="ZoomOut()">Zoom Out</button>
    <button onclick="SetContextMenuEnabled()">Context Menu</button>
    <button onclick="SetDevToolsEnabled()">Dev Tools</button>
    <br>
    <b>Dialogs</b><br>
    <button onclick="ShowOpenFile()">Open File Dialog</button>
    <button onclick="ShowOpenFileAsync()">Open File Dialog (async)</button>
    <button onclick="ShowOpenFolder()">Open Folder Dialog</button>
    <button onclick="ShowOpenFolderAsync()">Open Folder Dialog (async)</button>
    <button onclick="ShowSaveFile()">Save File Dialog</button>
    <button onclick="ShowSaveFileAsync()">Save File Dialog (async)</button>
    <br>
    <b>Misc</b><br>
    <a href="https://www.google.com">Google</a>
    <button onclick="ShowState()">Show State</button>
    <button onclick="SendWebMessage()">Send Web Message</button>
    <button onclick="ToastNotification()">Toast Notification</button>
    <button onclick="ShowMessage()">MessageBox</button>
    <button onclick="OpenChildWindow()">Child Window</button>
    <br>
    <button id="startbutton">Take Picture</button>
    <button onclick="ClearBrowserAutoFill()">ClearBrowserAutoFill</button>

    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </select>

    <form>
        <input id="myInput" type="text" name="myCountry" placeholder="Country" autocomplete="on">
        <button type="submit">Submit</button>
    </form>

    <p>
        <div id="Lineage"></div>
    </p>

    <span>
        <video id="video">Video stream not available.</video>
    </span>

    <span>
        <img id="photo" alt="The screen capture will appear in this box.">
    </span>

    <canvas id="canvas" style="visibility:hidden">required to render the photo, but not visible</canvas>
</body>
</html>
